<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column prop="prodInfo" :label="$t('group.prodInfo')" fixed="left" width="300">
        <template slot-scope="scope">
          <div class="prod-image">
            <img :src="resourcesUrl + scope.row.prodUrl" width="60" height="60" />
            <!-- <div class="prod-name-txt">{{scope.row.prodName}}</div>
            <div class="order-status">{{'￥ ' + scope.row.price}}</div>-->
            <span class="name">
              {{scope.row.prodName}}
              <div class="prod-price">{{'￥ ' + scope.row.price}}</div>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="expose" :label="$t('dataAnalysis.exposureTimes')" v-if="isVisible1" sortable></el-table-column>
      <el-table-column prop="exposePersonNum" :label="$t('dataAnalysis.exposurePeoples')" v-if="isVisible2" sortable></el-table-column>
      <el-table-column prop="addCartPerson" :label="$t('dataAnalysis.addCartNumbers')" v-if="isVisible3" sortable></el-table-column>
      <el-table-column prop="addCart" :label="$t('dataAnalysis.carNumbers')" v-if="isVisible4" sortable></el-table-column>
      <el-table-column prop="placeOrderPerson" :label="$t('dataAnalysis.placeOrderPerson')" v-if="isVisible5" sortable></el-table-column>
      <el-table-column prop="payPerson" :label="$t('dataAnalysis.paidNumbers')" v-if="isVisible6" sortable></el-table-column>
      <el-table-column prop="placeOrderNum" :label="$t('dataAnalysis.placeOrderNum')" v-if="isVisible7" sortable></el-table-column>
      <el-table-column prop="payNum" :label="$t('dataAnalysis.goodsPaid')" v-if="isVisible8" sortable></el-table-column>
      <el-table-column prop="placeOrderAmount" :label="$t('dataAnalysis.placeOrderAmount')" v-if="isVisible9" sortable></el-table-column>
      <el-table-column prop="payAmount" :label="$t('dataAnalysis.goodsPaidAmount')" v-if="isVisible10" sortable></el-table-column>
      <el-table-column prop="singleProdRate" :label="$t('dataAnalysis.unitConversionRate')" v-if="isVisible11" sortable>
        <template slot-scope="scope">
          <span>{{scope.row.singleProdRate}}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="refundNum" :label="$t('dataAnalysis.refundOrdersCounts')" v-if="isVisible12" sortable></el-table-column>
      <el-table-column prop="refundPerson" :label="$t('dataAnalysis.applyingForRefund')" v-if="isVisible13" sortable></el-table-column>
      <el-table-column prop="refundSuccessNum" :label="$t('dataAnalysis.refundedCounts')" v-if="isVisible14" sortable></el-table-column>
      <el-table-column prop="refundSuccessPerson" :label="$t('dataAnalysis.refundedSuccessCounts')" v-if="isVisible15" sortable></el-table-column>
      <el-table-column prop="refundSuccessAmount" :label="$t('dataAnalysis.successfulRefundAmount')" v-if="isVisible16" sortable></el-table-column>
      <el-table-column prop="refundSuccessRate" :label="$t('dataAnalysis.refundRate')" v-if="isVisible17" sortable>
        <template slot-scope="scope">
          <span>{{scope.row.refundSuccessRate}}%</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="$t('remindPop.operation')">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">{{$t('dataAnalysis.trendChartAnalysis')}}</el-button>
          <!-- <el-button type="text" size="small">编辑</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="$t('dataAnalysis.naturalDiurnalTrendChart')" :visible.sync="trendVisible" width="40%">
      <!-- <el-divider></el-divider> -->
      <!-- 图表 -->
      <div class="realtime-chart-box" id="prod-survey" style="width:100%;height:300px"></div>
      <!-- /图表 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    prodData: {
      type: Object,
      default: null
    }
  },
  watch: {
    prodData: {
      handler (newValue, oldValue) {
        // console.log(newValue)
        this.tableData = newValue.data
        this.sumData = newValue.sumData
        this.changVisibles()
      },
      deep: true
    }
  },
  data () {
    return {
      resourcesUrl: window.SITE_CONFIG.resourcesUrl,
      trendVisible: false, // 单个商品趋势弹窗
      tableData: this.prodData.data,
      sumData: this.prodData.sumData,
      params: this.prodData.params,
      dateArr: [564, 324, 234, 123], // 趋势图时间数组
      seriesDataArr: [], // 趋势图数据
      isVisible1: false,
      isVisible2: false,
      isVisible3: false,
      isVisible4: false,
      isVisible5: false,
      isVisible6: false,
      isVisible7: false,
      isVisible8: false,
      isVisible9: false,
      isVisible10: false,
      isVisible12: false,
      isVisible11: false,
      isVisible13: false,
      isVisible14: false,
      isVisible15: false,
      isVisible16: false,
      isVisible17: false
    }
  },
  methods: {
    handleClick (row) {
      this.trendVisible = true
      // console.log(row)
      this.singleProdTrendData(row.prodId)
    },
    judgeStrArrIncludeOtherString (str) {
      var strArr = this.sumData
      return strArr.includes(str)
    },
    /**
     * 控制表格列显隐
     */
    changVisibles () {
      this.isVisible1 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.exposureTimes'))
      this.isVisible2 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.exposurePeoples'))
      this.isVisible3 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.addCartNumbers'))
      this.isVisible4 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.carNumbers'))
      this.isVisible5 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.placeOrderPerson'))
      this.isVisible6 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.paidNumbers'))
      this.isVisible7 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.placeOrderNum'))
      this.isVisible8 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.goodsPaid'))
      this.isVisible9 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.placeOrderAmount'))
      this.isVisible10 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.goodsPaidAmount'))
      this.isVisible11 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.unitConversionRate'))
      this.isVisible12 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.refundOrdersCounts'))
      this.isVisible13 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.applyingForRefund'))
      this.isVisible14 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.refundedCounts'))
      this.isVisible15 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.refundedSuccessCounts'))
      this.isVisible16 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.successfulRefundAmount'))
      this.isVisible17 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.refundRate'))
    },
    /**
     * 单个商品的趋势图
     */
    getRealTimechartData () {
      const myChart = this.$echarts.init(document.getElementById('prod-survey'), 'walden')
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [this.$i18n.t('dataAnalysis.pageviews'), this.$i18n.t('dataAnalysis.numberOfVisitors'), this.$i18n.t('dataAnalysis.paidNumbers'), this.$i18n.t('dataAnalysis.paidGoodsCounts')]
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dateArr,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          axisTick: { show: false }
        },
        series: this.seriesDataArr
      }
      myChart.setOption(option, true)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    /**
     * 获取单个商品的趋势图数据
     */
    singleProdTrendData (prodId) {
      // console.log(this.prodData)
      this.$http({
        url: this.$http.adornUrl('/platform/prodAnalysis/getSingleProdTrend'),
        method: 'get',
        params: this.$http.adornParams(
          {
            prodId: prodId,
            shopId: null,
            dateType: this.prodData.params.dateValue,
            group: this.prodData.params.group,
            status: this.prodData.params.status,
            prodName: this.prodData.params.prodName,
            startTime: this.prodData.params.startTime,
            endTime: this.prodData.params.endTime
          }
        )
      }).then(({ data }) => {
        if (data) {
          this.dateArr = []
          this.seriesDataArr = []
          let obj1 = this.initObj(this.$i18n.t('dataAnalysis.pageviews'))
          let obj2 = this.initObj(this.$i18n.t('dataAnalysis.numberOfVisitors'))
          let obj3 = this.initObj(this.$i18n.t('dataAnalysis.paidNumbers'))
          let obj4 = this.initObj(this.$i18n.t('dataAnalysis.paidGoodsCounts'))
          data.forEach(i => {
            this.dateArr.push(i.currentDay)
            obj1.data.push(i.browse)
            obj2.data.push(i.visitor)
            obj3.data.push(i.payPerson)
            obj4.data.push(i.payNum)
          })
          this.seriesDataArr.push(obj1)
          this.seriesDataArr.push(obj2)
          this.seriesDataArr.push(obj3)
          this.seriesDataArr.push(obj4)
          this.getRealTimechartData()
        }
      })
    },
    /**
     * 初始化一个obj
     */
    initObj (name) {
      let obj = {}
      obj.name = name
      obj.type = 'line'
      // obj.stack = '总量'
      obj.smooth = true
      obj.data = []
      return obj
    }
  }
}
</script>
<style scoped>
.prod-image {
  display: flex;
  align-items: center;
}
.prod-image .name {
  margin-left: 10px;
  line-height: 20px;
  color: #606266;
}
.prod-price {
  color: red;
}
</style>
